import React, { Component } from 'react';

import { Icon } from 'amazeui-touch';
import { Link, hashHistory } from 'react-router';

export default class Header extends Component {

    constructor(props) {
        super(props);
        this.state = {
          menu: false
        }
    };

    handleBars () {
      this.setState({menu: !this.state.menu});
    };

    closeBars (url) {
      hashHistory.push(url);
      this.setState({ menu: false});
    }

    render() {
        let menuState = this.state.menu ? { display: 'block' } : { display: 'none' };
        return (
            <div id="header">
                <div className="header-img">
                  <img src="http://qiniu-dlwww.dlhis.com/hou-mobile-houweb-logo-01.png" alt=""/>
                </div>
                <Icon name="bars" onTouchTap={this.handleBars.bind(this)}></Icon>
                <div className='modal-back' style={menuState} onTouchTap={this.handleBars.bind(this)}></div>
                <div className='header-list' style={menuState}>
                  <ul>
                    {
                      this.props.tabs.map((item, ind) => {
                        return (
                          <li key={ind}>
                            <span onTouchTap={this.closeBars.bind(this, item.url)} >{item.title}</span>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
            </div>
        )
    }
};

Header.defaultProps = {
  tabs: [{
    title: '首页',
    url: 'home'
  },{
    title: '关于产品',
    url: 'products'
  },{
    title: '团队介绍',
    url: 'team'
  },{
    title: '产品试用',
    url: 'apply'
  }]
};
